<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			body{
				background-image:url(timg.jpg) ;
				background-size: cover;
			}
			.wrap{
				width: 500px;
				height: 200px;
				border: 1px solid #0000FF;
				margin: 200px auto;
				text-align: center;
			}
			h2{
				font-size: 20px;
				color: #0099CC;
			}
			hr{
				padding-top: 10px;
			}
			p{
				padding: 10px;
				color: #0099CC;
			}
			button{
				width: 50px;
				height: 24px;
				border-radius: 5px;
				color: #0099CC;
			}
			span{
				padding-left: 10px;
			}
			#autologin{
				width: 15px;
				height: 15px;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<h2>登录页面</h2>
			<hr >
			<p>
				<label for="username">用户名：</label>
				<input type="text" name="" id="username" value="" />
			</p>
			<p>
				<label for="password">密码：</label>
				<input type="password" name="" id="password" value="" />
			</p>
			<p><input type="checkbox" name="" id="autologin" value="" /><span>30天内免登陆</span></p>
			<p><button type="button" id="send">登录</button></p>
		</div>
		<script src="../jquery.min.js"></script>
		<script src="common.js"></script>
		<script type="text/javascript">
			$("#send").click(function(){
				let username=$("#username").val()
				let password=$("#password").val()
				if(username && password){
						$.ajax({
							url:`${address}/login`,
							method:"get",
							data:{
								username,
								password
							},
							success(data){
								if(data==="3"){
									alert("登录失败")
								}
								if(data==="2"){
									alert("用户名或密码错误")
								}	
								else{
									if($("#autologin")[0].checked){
										let date=new Date;
										date.setDate(date.getDate() +30)
										console.log(date)
										document.cookie=`userInfo=${data};expires=${date}`
									}
									sessionStorage.setItem("userInfo",data);
									location.href =`${address}/student.html`
								}
							}
						})
				}
			})
		</script>
	</body>
</html>
